<template>
  <div class="container">
    <!-- <el-form :inline="true" size="small" :model="formInline">
      <el-form-item label="所属分类">
        <el-select
          clearable
          v-model="formInline.category_id"
          placeholder="请选择"
        >
          <el-option
            v-for="item in cateList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            @change="getTableData()"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目名称">
        <el-input
          v-model.trim="formInline.name"
          autocomplete="off"
          placeholder="请输入项目名称"
          @change="getTableData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-row>
          <el-button type="primary" @click="getTableData">查询</el-button>
        </el-row>
      </el-form-item>
    </el-form> -->
    <!--  <el-row :gutter="10">
      <el-col :span="1.5" v-auth="['system:role:add']">
        <el-button type="success" size="small" @click="showDialog"
          >添加</el-button
        >
      </el-col>
    </el-row>
    <br /> -->
    <!--  <el-table
      stripe
      border
      :data="tableData"
      height="77vh"
      @row-click="handleRowClick"
    >
      <el-table-column type="index" align="center" label="序号" width="100">
      </el-table-column>
      <el-table-column prop="category_id" align="center" label="所属分类">
        <template slot-scope="scope">
          {{ formatterCategory_id(scope.row.category_id) }}
        </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="项目名称">
      </el-table-column>
      <el-table-column prop="total" align="center" label="总费用">
      </el-table-column>
      <el-table-column prop="total" align="center" label="价格详情">
        <template slot-scope="scope" v-if="scope.row.price_detail">
          <div>
            <el-popover placement="top-start" width="200" trigger="hover">
              <div
                v-for="(item, index) in scope.row.price_detailCopy"
                :key="index"
              >
                {{ item.name }}:{{ item.value }}
              </div>
              <el-button size="small" type="success" slot="reference"
                >价格详情</el-button
              >
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="simple_intro"
        align="center"
        show-overflow-tooltip
        label="项目简介"
      >
      </el-table-column>

      <el-table-column align="center" label="项目图标">
        <template slot-scope="scope">
          <div @click.stop="">
            <tablePrImg
              v-if="scope.row.icon"
              :imgSrc="scope.row.icon"
              :prImgList="[scope.row.icon]"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="sale" align="center" label="是否上架">
        <template slot-scope="scope">
          <div @click.stop="">
            <el-switch
              v-model="scope.row.sale"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="handleChange(scope.row)"
            >
            </el-switch>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="操作" width="350">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click.stop="showbasicDialog(scope.row)"
            >编辑</el-button
          >

          <el-button
            type="danger"
            size="small"
            @click.stop="handleDeleteById(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="page.total"
      :page.sync="page.page"
      @pagination="getTableData"
    /> -->
    <baleTable
      :tableData="tableData"
      :tableHead="tableHead"
      :isSearch="true"
      :isTableRowClick="true"
      :tableLoading="tableLoading"
      :page="page"
      @pageSizeChange="pageSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @searchMethods="searchMethods"
      @tableSortChange="tableSortChange"
      @handleRowClick="handleRowClick"
      ref="baleTable"
    >
      <template #caozuo="{ scope }">
        <el-button
          type="primary"
          size="small"
          @click.stop="showbasicDialog(scope.row)"
          >编辑</el-button
        >

        <el-button
          type="danger"
          size="small"
          @click.stop="handleDeleteById(scope.row)"
          >删除</el-button
        >
      </template>
      <template #headLeft>
        <div
          class="ml10 tableStats-btn tableStats-btn-active"
          @click="showDialog"
        >
          添加
        </div>
      </template>
      <template #icon="{ scope }">
        <div @click.stop="">
          <tablePrImg
            v-if="scope.row.icon"
            :imgSrc="scope.row.icon"
            :prImgList="[scope.row.icon]"
          />
        </div>
      </template>

      <template #sale="{ scope }">
        <div @click.stop="">
          <el-switch
            v-model="scope.row.sale"
            :active-value="1"
            :inactive-value="0"
            @change="handleChange(scope.row)"
          >
          </el-switch>
        </div>
      </template>
    </baleTable>
    <basicDialog ref="basicDialog" @refresh="getTableData"></basicDialog>
  </div>
</template>

<script>
import { tableHead } from "./config";
import {
  ApiCategoryList,
  ApiDelategory,
  ApiItemEditsale,
  ApiCateList,
} from "@a/index";
/* import menuDialog from "./component/menu_dialog.vue"; */
/* import piceDialog from "./component/pice_dialog.vue";*/
//基本信息
import basicDialog from "./component/AddDialog.vue";
import pagination from "@/components/pagination.vue"; // secondary package based on el-pagination
import editor from "@/components/editor.vue";
import tablePrImg from "@/components/tablePrImg.vue";
export default {
  components: {
    editor,
    tablePrImg,
    basicDialog,
  },
  data() {
    return {
      tableHead,
      /*       tableData: Array(20).fill(item), */
      formInline: {},
      page: {
        page: 1,
        size: 25,
        total: 0,
      },
      searchParams: {},
      sortParams: {},
      tableLoading: false,
      tableData: [],
      cateList: [],
    };
  },
  mounted() {
    this.getTableData();
    this.getCateList();
  },
  methods: {
    getCateList() {
      ApiCateList().then((res) => {
        this.cateList = res.data;
      });
    },
    handleDeleteById(val) {
      console.log(22222, val);
      this.$confirm("是否删除该数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true,
        type: "warning",
      })
        .then((res) => {
          ApiDelategory(val.id).then((res) => {
            this.$message.success("操作成功！");
            this.getTableData();
          });
        })
        .catch((err) => {});
    },
    formatterCategory_id(val) {
      if (val == 1) {
        return "专科护理";
      } else {
        return "母婴护理";
      }
    },
    formatterSale(val) {
      if (val == 1) {
        return "是";
      } else {
        return "否";
      }
    },
    getTableData(params = {}) {
      let postParams = {
        ...this.formInline,
        ...this.sortParams,
        ...this.page,
        ...params,
        ...this.searchParams,
      };
      this.tableLoading = true;
      ApiCategoryList(postParams).then((res) => {
        let { data, page } = res;
        this.tableData = data;
        this.page.total = page.total;

        this.tableLoading = false;
      });
    },
    showDialog() {
      this.$refs.basicDialog.showDialog();
    },
    /*   showEditDialog(data) {
      this.$refs.piceDialog.showDialog(data);
    },*/
    showbasicDialog(data) {
      this.$refs.basicDialog.showDialog(data);
    },
    searchMethods(params) {
      this.searchParams = {};
      this.page.page = 1;
      this.searchParams = params;
      this.getTableData();
    },
    pageSizeChange(val) {
      this.page.size = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.getTableData();
    },
    tableSortChange(params) {
      if (params.sort_str) {
        this.sortParams = { ...this.sortParams, ...params };
      } else {
        delete this.sortParams.sort_str;
        delete this.sortParams.sort_order;
      }
      this.page.page = 1;
      this.getTableData();
    },
    handleChange(val) {
      ApiItemEditsale(val, val.id).then((res) => {
        this.$message.success("操作成功！");
        this.getTableData();
      });
    },
    handleRowClick(row) {
      console.log(row);
      this.$refs.content.show(row.row);
    },
  },
};
</script>
<style></style>
